<template>
  <el-card>
    <template #header> 关键词搜索 </template>

    <el-row :gutter="10">
      <el-col :span="12">
        <div class="content">
          <div class="name">搜索用户数</div>
          <div class="count">{{ searchUser }}</div>
          <v-chart class="chart" autoresizie :option="setOption(1)"></v-chart>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="content">
          <div class="name">搜索量</div>
          <div class="count">{{ totalCount }}</div>
          <v-chart class="chart" autoresizie :option="setOption(0)"></v-chart></div
      ></el-col>
    </el-row>

    <el-table :data="pageData">
      <el-table-column label="排名" type="index" align="center" width="60"></el-table-column>
      <el-table-column label="关键字" align="center" prop="word"></el-table-column>
      <el-table-column label="搜索数量" align="center" prop="count"></el-table-column>
      <el-table-column label="搜索用户数" align="center" prop="user"></el-table-column>
      <el-table-column label="搜索占比" align="center" prop="percent"></el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup lang="ts">
// 导入计算属性
import { computed, ref } from 'vue'

// 导入仓库
import useEchartStore from '@/stores/echart'

// 获取仓库实例
const echartStore = useEchartStore()

// 初始化分页数据
const page = ref(1) // 当前页码
const limit = ref(5)
const total = ref(0)

// 分页器时间
const handleCurrentChange = (val: number) => {
  // console.log(val)

  page.value = val
}
// 拿取数据

// 原始数据
const searchWord = computed(() => {
  return echartStore.storeEchartData.searchWord
})

// 获取搜索数量的总数量

const totalCount = computed(() => {
  let result = searchWord.value.reduce((perv, item) => {
    return perv + item.count
  }, 0)
  return result
})

// 获取搜索用户总数据
const searchUser = computed(() => {
  let result = searchWord.value.reduce((perv, item) => {
    return perv + item.user
  }, 0)
  return result
})

// 从新从组表格展示数据
const newSearchWord = computed(() => {
  let result = searchWord.value.map((item) => {
    return {
      ...item,
      // 计算百分比
      percent: ((item.user / searchUser.value) * 100).toFixed(2) + '%'
    }
  })
  // 存储总条数
  total.value = searchWord.value.length
  return result
})

// 前端分页
// 每次展示五条数据
const pageData = computed(() => {
  // return newSearchWord.value.splice(0, 5)
  // return newSearchWord.value.splice(5, 10)
  return newSearchWord.value.slice((page.value - 1) * 5, page.value * 5)
})

// 声明类目轴
const asisList = computed(() => {
  return searchWord.value.map((item) => item.word)
})

// 计算搜索量数值轴
const searchTotal = computed(() => {
  return searchWord.value.map((item) => item.count)
})

// 计算搜索用户数值轴
const userTotal = computed(() => {
  return searchWord.value.map((item) => item.user)
})

const setOption = (flag: number) => ({
  xAxis: {
    data: asisList.value,
    show: false
  }, // x轴
  yAxis: {
    show: false
  }, // y轴
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  }, // 边距
  series: {
    name: flag ? '搜索用户数' : '搜索量',
    type: 'line',
    data: flag ? userTotal.value : searchTotal.value,
    smooth: true,
    itemStyle: {
      opacity: 0
    },
    lineStyle: {
      color: 'hotpink'
    },
    areaStyle: {
      color: 'skyblue'
    }
  } // 数据
})
</script>

<style lang="scss" scoped>
.content {
  .name {
    font-size: 14px;
    color: #ccc;
    margin: 5px 0;
  }
  .count {
    font-size: 24px;
    letter-spacing: 2px;
  }
  .chart {
    height: 50px;
  }
}
</style>
